<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Bootstrap</title>

    <link rel="stylesheet" href="../build/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="root" class="container">
        <form>
            <div class="form-group col-sm-12">
                <input type="text" class="form-control" value="text" />
                <input type="password" class="form-control" value="password" />
                <input type="datetime" class="form-control" value="2017-1-1" />
                <input type="datetime-local" class="form-control" value="2017-12-01T01:01" />
                <input type="date" class="form-control" value="2017-01-01" />
                <input type="month" class="form-control" value="2017-01" />
                <input type="time" class="form-control" value="01:01" />
                <input type="week" class="form-control" value="2017-W01" />
                <input type="number" class="form-control" value="2017" />
                <input type="email" class="form-control" value="335121817@qq.com" />
                <input type="url" class="form-control" value="http://localhost/index.html" />
                <input type="search" class="form-control" value="google" />
                <input type="tel" class="form-control" value="13372481946" />
                <input type="color" class="form-control" value="#66ccff" />
                <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group col-sm-12">
                <div class="checkbox">
                    <label>
<input type="checkbox" value="">
Option one is this and that&mdash;be sure to include why it's great
</label>
                </div>
                <div class="checkbox disabled">
                    <label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
                </div>

                <div class="radio">
                    <label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that&mdash;be sure to include why it's great
</label>
                </div>
                <div class="radio">
                    <label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
                </div>
                <div class="radio disabled">
                    <label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
                </div>
            </div>
            <div class="form-group">
                <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
                <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
                <label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

                <label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
                <label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
                <label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>
            </div>
            <div class="form-group">
                <div class="checkbox">
                    <label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
                </div>
                <div class="radio">
                    <label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
                </div>
            </div>
            <div class="form-group">
                <select class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
                <select multiple="multiple" class="form-control">
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </div>
        </form>
        <form class="form-horizontal">
            <div class="form-group">
                <label class="col-sm-2 control-label">Email</label>
                <div class="col-sm-10">
                    <p class="form-control-static">email@example.com</p>
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword" class="col-sm-2 control-label">Password</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control" id="inputPassword" placeholder="Password">
                </div>
            </div>
        </form>
        <form class="form-inline">
            <div class="form-group">
                <label class="sr-only">Email</label>
                <p class="form-control-static">email@example.com</p>
            </div>
            <div class="form-group">
                <label for="inputPassword2" class="sr-only">Password</label>
                <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
            </div>
            <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
            <button type="submit" class="btn btn-default">Confirm identity</button>
        </form>
        <form>
            <fieldset disabled="disabled">
                <div class="form-group">
                    <label for="disabledTextInput">Disabled input</label>
                    <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                </div>
                <div class="form-group">
                    <label for="disabledSelect">Disabled select menu</label>
                    <select id="disabledSelect" class="form-control">
                        <option>Disabled select</option>
                    </select>
                </div>
                <div class="checkbox">
                    <label>
    <input type="checkbox"> Can't check this
  </label>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
                <a href="#" class="btn btn-danger">danger</a>
            </fieldset>
            <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
        </form>
        <form>
            <div class="form-group">
                <label class="sr-only" for="inputHelpBlock">Input with help text</label>
                <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock"> ...
                <span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
                <hr />
                <div class="form-group has-success">
                    <label class="control-label" for="inputSuccess1">Input with success</label>
                    <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
                    <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
                </div>
                <div class="form-group has-warning">
                    <label class="control-label" for="inputWarning1">Input with warning</label>
                    <input type="text" class="form-control" id="inputWarning1">
                </div>
                <div class="form-group has-error">
                    <label class="control-label" for="inputError1">Input with error</label>
                    <input type="text" class="form-control" id="inputError1">
                </div>
                <div class="has-success">
                    <div class="checkbox">
                        <label>
  <input type="checkbox" id="checkboxSuccess" value="option1">
  Checkbox with success
</label>
                    </div>
                </div>
                <div class="has-warning">
                    <div class="checkbox">
                        <label>
  <input type="checkbox" id="checkboxWarning" value="option1">
  Checkbox with warning
</label>
                    </div>
                </div>
                <div class="has-error">
                    <div class="checkbox">
                        <label>
  <input type="checkbox" id="checkboxError" value="option1">
  Checkbox with error
</label>
                    </div>
                </div>
            </div>
        </form>
        <form>
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess2">Input with success</label>
                <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess2Status" class="sr-only">(success)</span>
            </div>
            <div class="form-group has-warning has-feedback">
                <label class="control-label" for="inputWarning2">Input with warning</label>
                <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
                <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                <span id="inputWarning2Status" class="sr-only">(warning)</span>
            </div>
            <div class="form-group has-error has-feedback">
                <label class="control-label" for="inputError2">Input with error</label>
                <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
                <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                <span id="inputError2Status" class="sr-only">(error)</span>
            </div>
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
                </div>
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
            </div>
        </form>
        <form class="form-horizontal">
            <div class="form-group has-success has-feedback">
                <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
                <div class="col-sm-9">
                    <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
                    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                    <span id="inputSuccess3Status" class="sr-only">(success)</span>
                </div>
            </div>
            <div class="form-group has-success has-feedback">
                <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
                <div class="col-sm-9">
                    <div class="input-group">
                        <span class="input-group-addon">@</span>
                        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
                    </div>
                    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                    <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
                </div>
            </div>
        </form>
        <form class="form-inline">
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputSuccess4">Input with success</label>
                <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess4Status" class="sr-only">(success)</span>
            </div>
        </form>
        <form class="form-inline">
            <div class="form-group has-success has-feedback">
                <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
                </div>
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
            </div>
        </form>
        <form>
            <div class="form-group has-success has-feedback">
                <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
                <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputSuccess5Status" class="sr-only">(success)</span>
            </div>
            <div class="form-group has-success has-feedback">
                <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
                <div class="input-group">
                    <span class="input-group-addon">@</span>
                    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
                </div>
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
            </div>
        </form>
        <form>
            <input class="form-control input-lg" type="text" placeholder=".input-lg">
            <input class="form-control" type="text" placeholder="Default input">
            <input class="form-control input-sm" type="text" placeholder=".input-sm">

            <select class="form-control input-lg">
                <option value="">.input</option>
            </select>
            <select class="form-control">
                <option value="">.input</option>
            </select>
            <select class="form-control input-sm">
                <option value="">.input</option>
            </select>
        </form>
        <form class="form-horizontal">
            <div class="form-group form-group-lg">
                <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
                </div>
            </div>
            <div class="form-group form-group-sm">
                <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
                </div>
            </div>
        </form>
        <div class="row">
            <div class="col-xs-2">
                <input type="text" class="form-control" placeholder=".col-xs-2">
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder=".col-xs-3">
            </div>
            <div class="col-xs-4">
                <input type="text" class="form-control" placeholder=".col-xs-4">
            </div>
            <div class="col-xs-3">
                <input type="text" class="form-control" placeholder=".col-xs-3">
            </div>
        </div>
        <div class="row">
            <a class="btn btn-default" href="#" role="button">Link</a>
            <button class="btn btn-default" type="submit">Button</button>
            <input class="btn btn-default" type="button" value="Input">
            <input class="btn btn-default" type="submit" value="Submit">
            <!-- Standard button -->
            <button type="button" class="btn btn-default">（默认样式）Default</button>

            <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
            <button type="button" class="btn btn-primary">（首选项）Primary</button>

            <!-- Indicates a successful or positive action -->
            <button type="button" class="btn btn-success">（成功）Success</button>

            <!-- Contextual button for informational alert messages -->
            <button type="button" class="btn btn-info">（一般信息）Info</button>

            <!-- Indicates caution should be taken with this action -->
            <button type="button" class="btn btn-warning">（警告）Warning</button>

            <!-- Indicates a dangerous or potentially negative action -->
            <button type="button" class="btn btn-danger">（危险）Danger</button>

            <!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
            <button type="button" class="btn btn-link">（链接）Link</button>
            <p>
                <button type="button" class="btn btn-primary btn-lg">（大按钮）Large button</button>
                <button type="button" class="btn btn-default btn-lg">（大按钮）Large button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary">（默认尺寸）Default button</button>
                <button type="button" class="btn btn-default">（默认尺寸）Default button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-sm">（小按钮）Small button</button>
                <button type="button" class="btn btn-default btn-sm">（小按钮）Small button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-xs">（超小尺寸）Extra small button</button>
                <button type="button" class="btn btn-default btn-xs">（超小尺寸）Extra small button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-lg btn-block">（块级元素）Block level button</button>
                <button type="button" class="btn btn-default btn-lg btn-block">（块级元素）Block level button</button>
            </p>
            <p>
                <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
                <button type="button" class="btn btn-default btn-lg active">Button</button>
                <a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
                <a href="#" class="btn btn-default btn-lg active" role="button">Link</a>
                <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
                <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
                <a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
                <a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>
            </p>
        </div>
    </div>
    
    <script src="../build/jQuery/jquery-3.4.1.js"></script>
    <script src="../build/bootstrap/js/bootstrap.bundle.js"></script>
    <script src="index.js"></script>
</body>
</html>